<template>
  <div class="auth-bg">
    <div class="auth-card">
      <!-- 左侧背景图 -->
      <div class="auth-left"></div>
      <!-- 右侧登录表单 -->
      <div class="auth-right">
        <el-menu
          mode="horizontal"
          :default-active="activeMenu"
          background-color="transparent"
          text-color="#000"
          active-text-color="#000"
          class="el-menu-demo"
          @select="handleMenuSelect"
        >
          <el-menu-item index="1">关于-冯奥</el-menu-item>
          <el-menu-item index="2">帮助中心-冯奥</el-menu-item>
          <el-menu-item index="3">分享</el-menu-item>
        </el-menu>
        <h2 class="auth-title">SIGN IN</h2>
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="auth-form">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="用户名" size="large" clearable />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" clearable />
          </el-form-item>
          <el-form-item prop="captcha">
            <el-input v-model="loginForm.captcha" placeholder="验证码" size="large" clearable style="width: 60%; margin-right: 10px;" />
            <template v-if="!showCaptcha">
              <el-button size="large" @click="getCaptcha">获取验证码</el-button>
            </template>
            <template v-else>
              <span class="captcha-img" @click="refreshCaptcha">
                <svg width="80" height="36">
                  <rect x="0" y="0" width="80" height="36" rx="8" fill="#f0f0f0"/>
                  <text x="50%" y="50%" text-anchor="middle" dy=".35em" font-size="22" font-family="Arial" fill="#009688" font-weight="bold">{{ captchaCode }}</text>
                </svg>
              </span>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-btn" size="large" @click="onLogin">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import http from '@/Axios/Htttp'
const router = useRouter()
const loginFormRef = ref()
const loginForm = ref({
  username: 'admin',
  password: '123',
  captcha: ''
})
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
}

// 验证码相关
const captchaCode = ref('')
const showCaptcha = ref(false)
const activeMenu = ref('0')
function randomCaptcha() {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
  let code = ''
  for (let i = 0; i < 4; i++) {
    code += chars.charAt(Math.floor(Math.random() * chars.length))
  }
  return code
}
function handleMenuSelect(index: string) {
  activeMenu.value = index
  if (index === '1') {
    router.push('/about')
  }
  if (index === '2') {
    router.push('/help-center')
  }
  // 其他菜单项可后续扩展
}
function getCaptcha() {
  captchaCode.value = randomCaptcha()
  showCaptcha.value = true
}

function refreshCaptcha() {
  captchaCode.value = randomCaptcha()
}

function onLogin() {
  loginFormRef.value.validate((valid: boolean) => {
    if (valid) {
      if (loginForm.value.captcha.toUpperCase() !== captchaCode.value) 
      {
        ElMessage.error('验证码错误')
        refreshCaptcha()
        loginForm.value.captcha = ''
        return
      }
      http.post("api/User/Login",loginForm.value).then(res=>
      {
        if(res.data.code=='200')
        {
            ElMessage.success(res.data.message)
            router.push('/Home')
        }
        else
        {
            ElMessage.error(res.data.message)
        }
      })
    } else {
      ElMessage.error('请填写完整信息')
      refreshCaptcha()
    }
  })
}
</script>

<style scoped>
.auth-bg {
  min-height: 100vh;
  width: 100vw;
  background: url('/背景图.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  display: flex;
  width: 800px;
  height: 420px;
  background: rgba(255,255,255,0.85);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  overflow: hidden;
}
.auth-left {
  flex: 1;
  background: url('/背景图.jpg') no-repeat center center;
  background-size: cover;
}
.auth-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(250, 237, 241, 0.95);
}
.auth-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 30px;
  color: #222;
}
.auth-form {
  width: 100%;
}
.login-btn {
  width: 100%;
  background: #d2bdf3;
  border: none;
}
.captcha-img {
  display: inline-block;
  cursor: pointer;
  margin-left: 10px;
  user-select: none;
  vertical-align: middle;
}
.el-menu-demo :deep(.el-menu-item) {
  color: #000 !important;
}
.el-menu-demo :deep(.el-menu-item.is-active) {
  color: #000 !important;
}
</style>